import React from "react";
import "./index.css";
export default function Footer({ todoList, setTodoList }) {
  const getCheckedNum = () => {
    return todoList.reduce((p, c) => (c.done ? p + 1 : p), 0);
  };

  const checkedAllHandle = (e) => {
    const expChecked = e.target.checked;

    const newTodoList = todoList.map((item) => {
      return { ...item, done: expChecked };
    });

    setTodoList(newTodoList);
  };

  return (
    <div>
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            onChange={checkedAllHandle}
            checked={
              getCheckedNum() === todoList.length && todoList.length !== 0
            }
          />
        </label>
        <span>
          <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
        </span>
        <button
          className="btn btn-danger"
          onClick={() => {
            setTodoList(todoList.filter((item) => !item.done));
          }}
        >
          清除已完成任务
        </button>
      </div>
    </div>
  );
}
